import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {getQueryString} from '../utils/util';
import { Button, Checkbox, InputItem, Picker,TextareaItem,Toast } from 'antd-mobile';

import 'antd-mobile/lib/button/style/index.css';
import 'antd-mobile/lib/checkbox/style/index.css';
import 'antd-mobile/lib/textarea-item/style/index.css';
import 'antd-mobile/lib/button/style/index.css';
import 'antd-mobile/lib/list/style/index.css';
import 'antd-mobile/lib/input-item/style/index.css';
import 'antd-mobile/lib/picker/style/index.css';
import 'antd-mobile/lib/toast/style/index.css';
import '../static/styles/add-lxr.css';
import { get, post } from '../api/getData';

import { createForm } from 'rc-form';

const CheckboxItem = Checkbox.CheckboxItem;

class Zhaopin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            experience:1,
            name:'',
            phone:'',
            address:'',
            salary:'5k---6k',
            other:'',
            nameStatus:'',
            phoneStatus:'',
            addressStatus:'',
            submitLoading:false
        }
    }

    componentDidMount() {
        document.title = '领队招聘';
    }

    checkboxChange(experience){
        this.setState({
            experience
        });
    }

    checkNameField(){
        this.setState({
            name: this.name.value,
            nameStatus:'right'
        });

        if(!this.name.value){
            this.setState({
                nameStatus: 'error'
            });
        }
    }

    checkPhoneField(){
        this.setState({
            phone: this.phone.value
        });
        let regex = /^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,3,6,7,8]{1}\d{8}$|^18[\d]{9}$/;
        if(this.phone.value){
            if(regex.test(this.phone.value)){
                this.setState({
                    phoneStatus: 'right'
                });
            }else{
                this.setState({
                    phoneStatus: 'error'
                });
            }
        }else{
            this.setState({
                phoneStatus: 'error'
            });
        }
    }

    checkAddressField(){
        this.setState({
            address: this.address.value,
            addressStatus:'right'
        });

        if(!this.address.value){
            this.setState({
                addressStatus: 'error'
            });
        }
    }

    checkSalaryField(){
        this.setState({
            salary: this.salary.value,
        });
    }

    checkOtherField(){
        this.setState({
            other: this.other.value,
        });
    }

    submit(){
        let formData = new FormData();
        let __this = this;
        formData.append('name', this.state.name);
        formData.append('phone', this.state.phone);
        formData.append('address', this.state.address);
        formData.append('experience', this.state.experience);
        formData.append('salary', this.state.salary);
        formData.append('other', this.state.other);

        __this.setState({
            submitLoading:true
        });

        post('/api/activity/zhaopin', formData, function(error, data){
            __this.setState({
                submitLoading:false
            });
            if(error === null){
                Toast.success('添加成功', 1);
            }else{
                Toast.fail(error, 1);
            }
        })
    }

    render() {
        return (<div>
            <div className='p22'>
                <div className='enroll-zysx'>
                    <div className='enroll-title'>只要你符合如下要求，我们尽情期待您的加入</div>
                    <div className='enroll-content'>
                        <div className='enroll-content-item'>
                            <p className='enroll-content-num'>1.</p><p>年满20-40周岁，男女不限</p>
                        </div>
                        <div className='enroll-content-item'>
                            <p className='enroll-content-num'>2.</p><p>有1~3年的相关经验，相关专业毕业可降低要求</p>
                        </div>
                        <div className='enroll-content-item'>
                            <p className='enroll-content-num'>3.</p><p>认真耐心，吃苦耐劳</p>
                        </div>
                    </div>
                </div>

                <div className='enroll-zysx mt20'>
                    <div className='enroll-title'>留下您的信息</div>
                    <div className='enroll-content'>
                        <div className='title-input'>
                            <div className='title-input-title'>姓&nbsp;&nbsp;&nbsp;&nbsp;名 :</div>
                            {
                                this.state.nameStatus === 'right'
                                ?
                                <div className='title-input-input right'>
                                    <input value={this.state.name} onChange={() => this.checkNameField()} ref={name => this.name = name} type='text' placeholder='请输入您的真实姓名' />
                                </div>
                                :
                                this.state.nameStatus === 'error'
                                ?
                                <div className='title-input-input error'>
                                    <input value={this.state.name} onChange={() => this.checkNameField()} ref={name => this.name = name} type='text' placeholder='请输入您的真实姓名' />
                                </div>
                                :
                                <div className='title-input-input'>
                                    <input value={this.state.name} onChange={() => this.checkNameField()} ref={name => this.name = name} type='text' placeholder='请输入您的真实姓名' />
                                </div>
                            }
                        </div>
                        <div className='title-input'>
                            <div className='title-input-title'>联系方式 :</div>
                            {
                                this.state.phoneStatus === 'right'
                                ?
                                <div className='title-input-input right'>
                                    <input value={this.state.phone} onChange={() => this.checkPhoneField()} ref={phone => this.phone = phone} type='text' placeholder='请输入有效的手机号码' />
                                </div>
                                :
                                this.state.phoneStatus === 'error'
                                ?
                                <div className='title-input-input error'>
                                    <input value={this.state.phone} onChange={() => this.checkPhoneField()} ref={phone => this.phone = phone} type='text' placeholder='请输入有效的手机号码' />
                                </div>
                                :
                                <div className='title-input-input'>
                                    <input value={this.state.phone} onChange={() => this.checkPhoneField()} ref={phone => this.phone = phone} type='text' placeholder='请输入有效的手机号码' />
                                </div>
                            }
                        </div>
                        <div className='title-input'>
                            <div className='title-input-title'>现居地址 :</div>
                            {
                                this.state.addressStatus === 'right'
                                ?
                                <div className='title-input-input right'>
                                    <input value={this.state.address} onChange={() => this.checkAddressField()} ref={address => this.address = address} type='text' placeholder='请输入您的现居地址' />
                                </div>
                                :
                                this.state.addressStatus === 'error'
                                ?
                                <div className='title-input-input error'>
                                    <input value={this.state.address} onChange={() => this.checkAddressField()} ref={address => this.address = address} type='text' placeholder='请输入您的现居地址' />
                                </div>
                                :
                                <div className='title-input-input'>
                                    <input value={this.state.address} onChange={() => this.checkAddressField()} ref={address => this.address = address} type='text' placeholder='请输入您的现居地址' />
                                </div>
                            }
                        </div>
                        <div className='title-input'>
                            <div className='title-input-title'>期望薪资 :</div>
                            <div className='title-input-select'>
                                <select value={this.state.salary} onChange={() => this.checkSalaryField()} ref={salary => this.salary = salary}>
                                    <option value="5k---6k">5k---6k</option>
                                    <option value="6k---9k">6k---9k</option>
                                    <option value="8k---10k">8k---10k</option>
                                    <option value="10k+">10k+</option>
                                </select>
                            </div>
                        </div>
                        <div className='enroll-bz' style={{'justifyContent':'space-between'}}>
                            <div>相关经验: </div>
                            <div className='enroll-checkbox'>
                                <label>
                                    有
                                    <CheckboxItem checked={this.state.experience === 1?true:false}  key='1' onChange={() => this.checkboxChange(1)}></CheckboxItem>
                                </label>
                                <label>
                                    没有
                                    <CheckboxItem checked={this.state.experience === 0?true:false} key='0' onChange={() => this.checkboxChange(0)}></CheckboxItem>
                                </label>
                            </div>
                        </div>
                        <div className='enroll-bz' style={{'justifyContent':'space-between'}}>
                            <div>备注</div>
                            <div>
                                <textarea  value={this.state.other} onChange={() => this.checkOtherField()} ref={other => this.other = other} className='enroll-textarea'></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <Button onClick={() => this.submit()} className='enroll-button mt40'>提交</Button>
            </div>
        </div>);
    }
}

export default Zhaopin;
